<template>
	<el-popover placement="bottom" trigger="hover" popper-class="my-table-column-filter__popper">
		<template #reference>
			<my-icon icon="Setting" />
		</template>
		<template v-if="checkboxList.length">
			<el-checkbox-group v-model="fieldValue" class="flex-col max-h-400 overflow-y-auto">
				<el-checkbox v-for="(col, index) in checkboxList" :key="col.prop || index" :disabled="col.display === 'always'" :value="col.prop">{{
					col.label }}
				</el-checkbox>
			</el-checkbox-group>
			<div class="m-t-5 flex m-around">
				<el-button v-if="filterReset" type="primary" size="small" @click="filterResetClick">重 置</el-button>
				<el-button v-if="filterConfirm" type="success" size="small" @click="filterConfirmClick">确 定</el-button>
			</div>
		</template>
		<div v-else>没有可显示的列</div>
	</el-popover>
</template>

<script setup name="ColumnFilter">
	const emits = defineEmits(['update:modelValue', 'filterResetClick']),
	props = defineProps({
		columns: {
			type: Array,
			default() {
				return [];
			}
		},
		modelValue: {
			type: Array,
			default() {
				return [];
			}
		},
		filterConfirm: {
			type: Boolean,
			default: false
		},
		filterReset: {
			type: Boolean,
			default: true
		}
	});

const checkboxList = computed(() => props.columns.filter((col) => !!col.prop && !col.type)),
	fieldValue = ref(props.modelValue);

watchEffect(()=>{
	fieldValue.value = props.modelValue
})

watchEffect(()=>{
	if(!props.filterConfirm) emits('update:modelValue', fieldValue.value);
})

function filterConfirmClick() {
	emits('update:modelValue', fieldValue.value);
}
function filterResetClick() {
	emits('filterResetClick');
}

</script>

<style>
	.my-table-column-filter__popper {
		width: auto !important;
		min-width: 80px !important;

		.el-checkbox {
			margin-right: 0;
		}
	}
</style>